<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>


    <div id="app4">



        <table>

            <tr>
                <td>
                    id
                </td>
                <td>
                    姓名
                </td>
                <td>
                    性别
                </td>
                <td>
                    操作
                </td>
            </tr>

            <!-- 使用Vue里面的for来遍历数据 -->
            <tr v-for='s in todos' :id="s.id">

                <td>
                    {{s.id}}
                </td>
                <td v-if=s.Name!=undefined>
                    {{s.Name}}
                </td>
                <td v-if=s.Name==undefined>

                    <input v-model="Name">

                   

                </td>
                <td v-if=s.Sex!=undefined>
                    {{s.Sex}}
                </td>
                <td v-if=s.Sex==undefined>

                    <input v-model="Sex">

                </td>
                <td>
                    
                    
                    <button v-if="edit_if" title="修改该数据" @click="edit(s.id)">编辑</button>
                    <button v-if="edit_if" title="删除该数据" @click="del(s.id)">删除</button>
                    <p v-if=s.Name==undefined><button v-if=s.Name==undefined @click="no(s.id)">取消操作</button> <button v-if=s.Name==undefined @click="save(s.id)">保存操作</button>{{answer}}</p>
                </td>

            </tr>


            <tr>
                <input v-model="keyword" placeholder="请输入你要查询的数据" v-if="edit_if">

                <button @click='query()' v-if="edit_if"><span :title="keyword ? tit : tit2">查找</span></button>
                <button @click='add()' v-if="edit_if"><span title="添加一条数据">添加</span></button>

            </tr>
        </table>


    </div>



    <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
    <script src="../Vue.js/vue.js"></script>


    <script>

        // 初始化数据
        let arr = [

            {
                id: 1,

                Name: "老八",

                Sex: "男",

                isDel: false


            },
            {
                id: 2,

                Name: "老六",

                Sex: "变态",

                isDel: false
            },

        ]


        function isDel(arr) {

            let newtodos = arr.filter(item => {

                return !item.isDel

            })

            return newtodos

        }


        // 声明变量、等等等等（我知道是干嘛的，但是我说不出来。。。。。）
        var app4 = new Vue({

            el: '#app4',
            data: {

                todos: arr,

                keyword: '',

                Name: '',

                Sex: '',

                edit_if: true,

                tit: '开始查找' ,

                tit2:'你还没输入数据哦！',

                answer: "请输入你的数据"

            },watch: {

                Name: function () {



    this.answer = "正在等待用户输入数据"

    this.GetA()

}, 

Sex:function(){

    this.answer = "正在等待用户输入数据"

this.GetA()


}

},
created: function () {

this.GetA = _.debounce(() => {
    

    let dd =this.Name

    let aa=this.Sex

    dd= dd.split(' ').join('')

    aa=aa.split(' ').join('')


    if (dd&&aa) {

        this.answer = "数据符合"

    } else {

        this.answer = "不要输入空的数据哦"
    }


}, 500)


},
            // 用来装每一个按钮的点击事件的
            methods: {
                no() {


                    arr = arr.filter(item => {

                        return item.Name

                    })


                    this.todos = isDel(arr)

                    this.edit_if = true

                },
                // 编辑事件，当我们点击编辑时我们会得到一个相应的id，然后给编辑框里面赋值
                edit: function (id) {

                    this.edit_if = false


                    let editData = this.todos.filter(item => { return item.id == id })



                    this.Name = editData[0].Name


                    this.Sex = editData[0].Sex


                    this.todos = this.todos.map(item => {

                        if (item.id == id) {

                            let obj = {

                                id,

                                isDel: false

                            }

                            item = obj

                        }

                        return item
                    })

                },

                // 编辑的保存事件，当我们点保存的时候会修改初始化的数据然后赋给页面里声明的用来遍历的数据todos（我这里是todos）
                save: function (id) {



                    if (this.Name && this.Sex) {

                        arr.forEach(item => {

                            if (item.id == id) {

                                item.Name = this.Name
                                item.Sex = this.Sex

                            }



                        })


                        console.log(arr);

                        this.todos = isDel(arr)

                        alert("操作成功")



                    } else {

                        alert("操作失败！！！内容不可为空")


                        arr = arr.filter(item => {

                            return item.Name

                        })


                        this.todos = isDel(arr)


                    }

                    this.edit_if = true

                },


                // 删除事件，点击删除时我们会把初始化里面的数据进行假删除的操作（注意我这里是假删除）
                del: function (id) {




                    // 我们并未把数据删除，而是给了他一个被删除的状态
                    arr.map(item => {

                        if (item.id == id) {

                            item.isDel = true

                        }

                    })


                    this.todos = isDel(arr)

                    this.edit_if = true

                },

                // 添加数据
                add() {

                    // 这里是把文本框里面的内容清空一下，因为我们是使用完后直接把添加页面隐藏了
                    // 所以上次输入的数据不会消失，所以我们要进行一次手动清除
                    this.Name = ''
                    this.Sex = ''

                    let id = 0

                    arr.map(item => {

                        if (item.id > id) {

                            id = item.id

                        }



                    })

                    let obj = {

                        id: id + 1,

                        isDel: false

                    }



                    arr.push(obj)



                    this.todos = isDel(arr)


                    this.edit_if = false



                },

                // 查询事件
                query() {

                    let newtodos = isDel(arr)

                    if (this.keyword) {

                        this.todos = newtodos.filter(item => {

                            return item.id == this.keyword || item.Name == this.keyword || item.Sex == this.keyword


                        })

                        this.keyword = ''

                    } else {

                        alert('请输入有效数据，小孩儿别手贱哦！！！')

                        this.todos = newtodos

                    }


                    this.edit_if=true


                }

            }

        })


    </script>

</body>

</html>